<template>
  <div @mouseleave="mouseleave">



    <div class="menus">
      <div v-for="(item,index) in menusItem" :key="index" @mouseover="mouseover(index)">
        <div class="menus-item">
          {{item.type}}
          <i class="el-icon-arrow-right"></i>
        </div>
      </div>



      <h4>推荐城市</h4>
      <a href>
        <img src="http://157.122.54.189:9093/images/pic_sea.jpeg" alt class="img" />
      </a>



      <div class="sub-menus" v-if="judge">
        <div class="lis" v-for=" (items,indexx) in menusItem[indexes].children" :key="indexx">
          <span class="xieti" @click="screen(items.city)">{{indexx +1}}</span>
          <span class="yanse"  @click="screen(items.city)">{{items.city}}</span>
          <span  @click="screen(items.city)">{{items.desc }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menusItem: {},
      indexes: 0,
      judge: false
      ,
     
    };
  },
  mounted() {
    this.$axios({
      url: "/posts/cities"
    }).then(res => {
      const { data } = res.data;
      this.menusItem = data;
      console.log(this.menusItem);
      //   console.log(res);
    });
  },
  methods: {
    mouseover(index) {
      this.indexes = index;
      this.judge = true;
    },
    mouseleave() {
      this.judge = false;
    },
    screen(city){
        console.log(city);
        // 把点击的city存在store本地
        this.$store.commit("air/CategoryList",city )
        // this.$axios({
        //   url:'/posts',
        //   params:{
        //     city: this.city
        //   }
        // }).then(res=>{
        //   console.log(res);
        //   const {data} = res.data
          
        // })
    }
  }
};
</script>

<style scoped lang='less'>
.menus {
  // background-color:skyblue;
  border-top: 1px solid #ddd;
  .menus-item {
    width: 260px;
    line-height: 40px;
    padding: 0 20px;
    font-size: 14px;
    box-sizing: border-box;
    border-right: 1px solid #ddd;
    border-left: 1px solid #ddd;
    border-bottom: 1px solid #ddd;

    i {
      float: right;
      line-height: 40px;
      font-size: 16px;
      color: #999;
    }
    &:hover {
      color: #ffa500;
      border-right: 1px solid #fff;
    }
  }
  h4 {
    margin: 20px 0 10px;
    font-weight: normal;
    padding-bottom: 10px;
    border-bottom: 1px solid #ddd;
  }
  .img {
    display: inline-block;
    width: 260px;
  }
}
.sub-menus {
  // z-index: 100;
  background: #fff; 
  position: absolute;
  left: 260px;
  box-sizing: border-box;
  top: 0;
  width: 350px;
  padding: 10px 20px;
  height: 200px;
  border: 1px solid #ddd;
  border-left: 0;
  &::after {
    position: absolute;
    content: "";
    left: -1px;
    bottom: -1px;
    height: 38px;
    width: 1px;
    border-left: 1px solid #ddd;
  }
  .lis {
    font-size: 14px;
    display: block;
    height: 36px;
    align-items: center;
    color: #999;
    display: flex;
     span{
        &:hover{
            text-decoration: underline;
            cursor: pointer;
        }
    }
    .xieti {
      align-items: center;
      font-size: 24px;
      color: #ffa500;
      font-style: oblique;
      &:hover{
          text-decoration: none;
      }
    }
    .yanse {
      color: #ffa500;
      margin: 0 10px;
    }
   
  }
}
</style>